import {ImageResponse} from 'next/og';
import siteConfig from '@/config';

export const config = {
  runtime: 'edge'
};

export default async function OG(req: Request) {
  const interSemiBold = await fetch(
    new URL('./Inter-SemiBold.otf', import.meta.url)
  ).then((res) => res.arrayBuffer());
  const interRegular = await fetch(
    new URL('./Inter-Regular.otf', import.meta.url)
  ).then((res) => res.arrayBuffer());

  const {searchParams} = new URL(req.url);
  let title = siteConfig.title,
    subtitle;
  if (searchParams.has('params')) {
    let params;
    try {
      params = JSON.parse(searchParams.get('params')!);
    } catch {
      // Ignore
    }
    if (params) {
      title = params.title || title;
      subtitle = params.subtitle;
    }
  }

  return new ImageResponse(
    (
      <div
        style={{
          height: '100%',
          width: '100%',
          display: 'flex',
          flexDirection: 'column',
          alignItems: 'flex-start',
          padding: 80,
          backgroundColor: 'white',
          fontWeight: 600,
          color: '#24292f'
        }}
      >
        <svg
          aria-label="next-intl logo"
          viewBox="0 0 499 120"
          width={300}
          xmlns="http://www.w3.org/2000/svg"
        >
          <g fill="none" fillRule="evenodd">
            <path
              d="M184.317 93.257V52.42c.6-.24 1.92-.51 3.898-.81a49.417 49.417 0 0 1 7.166-.45c2.579 0 4.738.3 6.447.93a8.581 8.581 0 0 1 4.138 3.118c1.05 1.44 1.799 3.299 2.248 5.577.45 2.28.66 5.068.66 8.366v24.107h5.847V67.261a39.402 39.402 0 0 0-.9-8.725 18.32 18.32 0 0 0-2.998-6.807 13.58 13.58 0 0 0-5.667-4.348c-2.369-1.019-5.337-1.529-8.845-1.529-4.258 0-7.856.3-10.794.9-2.939.6-5.278 1.14-7.017 1.619v44.886h5.817Zm65.096.99a30.068 30.068 0 0 0 8.155-.99c2.309-.66 3.868-1.23 4.738-1.709l-1.08-5.037a31.537 31.537 0 0 1-4.048 1.529c-1.859.6-4.377.9-7.556.9-5.756 0-9.954-1.53-12.593-4.588-2.638-3.059-4.048-7.436-4.228-13.133h32.653c.06-.42.09-.87.12-1.35.03-.48.06-.959.06-1.439 0-7.736-1.7-13.463-5.097-17.18-3.399-3.719-7.936-5.578-13.613-5.578-2.573.002-5.12.512-7.496 1.5a18.395 18.395 0 0 0-6.477 4.527 23.238 23.238 0 0 0-4.587 7.616c-1.17 3.029-1.74 6.597-1.74 10.644-.031 3.301.393 6.59 1.26 9.775a19.852 19.852 0 0 0 4.048 7.676 18.677 18.677 0 0 0 7.106 5.038c2.819 1.199 6.297 1.799 10.375 1.799Zm10.164-27.976h-26.626a21.127 21.127 0 0 1 1.2-5.846 15.508 15.508 0 0 1 2.878-4.918 14.23 14.23 0 0 1 4.318-3.358 12.293 12.293 0 0 1 5.637-1.26c3.958 0 7.016 1.35 9.175 4.048 2.159 2.699 3.298 6.477 3.418 11.334Zm19.58 26.986c.72-1.32 1.589-2.848 2.608-4.527 1.02-1.68 2.13-3.479 3.359-5.368a189.287 189.287 0 0 1 3.838-5.667c1.349-1.919 2.638-3.748 3.957-5.487 1.26 1.74 2.58 3.568 3.928 5.487a240.442 240.442 0 0 1 3.868 5.667c1.23 1.86 2.37 3.628 3.359 5.368.989 1.739 1.889 3.238 2.608 4.527h6.297a128.627 128.627 0 0 0-3.748-6.746c-1.35-2.28-2.729-4.498-4.168-6.597-1.44-2.099-2.878-4.198-4.318-6.177a465.754 465.754 0 0 0-4.048-5.487l14.843-21.498h-6.387l-12.234 17.81-12.053-17.81h-6.836L289.14 68.61a362.302 362.302 0 0 0-8.275 11.754 142.32 142.32 0 0 0-7.736 12.893h6.027Zm58.529.99a21.783 21.783 0 0 0 6.836-1.02c2.099-.69 3.568-1.32 4.408-1.829l-1.44-4.857a22.749 22.749 0 0 1-3.508 1.559c-1.499.54-3.478.87-5.936.87a16.311 16.311 0 0 1-3.958-.45 6.132 6.132 0 0 1-3.059-1.8c-.84-.899-1.469-2.158-1.919-3.837-.45-1.68-.66-3.778-.66-6.447V51.699h18.53v-4.947h-18.53V32l-5.846 1.08v42.816a39.768 39.768 0 0 0 .72 8.096c.48 2.279 1.289 4.168 2.458 5.697a10.47 10.47 0 0 0 4.678 3.418c1.948.75 4.347 1.14 7.226 1.14Zm32.353-24.198v-5.667h-20.33v5.667h20.33Zm12.833-32.832a4.258 4.258 0 0 0 3.058-1.23c.84-.809 1.26-1.888 1.26-3.268 0-1.379-.42-2.458-1.26-3.298a4.23 4.23 0 0 0-3.058-1.2 4.357 4.357 0 0 0-3.059 1.2c-.84.81-1.259 1.919-1.259 3.298 0 1.38.42 2.459 1.26 3.269a4.138 4.138 0 0 0 3.058 1.229Zm2.968 56.04V46.752h-5.847v46.505h5.847Zm21.019 0V52.42c.6-.24 1.889-.51 3.928-.81a48.976 48.976 0 0 1 7.136-.45c2.579 0 4.738.3 6.417.93a8.581 8.581 0 0 1 4.137 3.118c1.05 1.44 1.8 3.299 2.25 5.577.449 2.28.659 5.068.659 8.366v24.107h5.847V67.261a39.402 39.402 0 0 0-.9-8.725 17.442 17.442 0 0 0-3.028-6.807 13.58 13.58 0 0 0-5.667-4.348c-2.369-1.019-5.337-1.529-8.845-1.529-4.258 0-7.856.3-10.795.9-2.938.6-5.277 1.14-7.016 1.619v44.886h5.877Zm59.788.99a21.783 21.783 0 0 0 6.837-1.02c2.098-.69 3.568-1.32 4.407-1.829l-1.439-4.857a22.749 22.749 0 0 1-3.508 1.559c-1.5.54-3.478.87-5.937.87a16.311 16.311 0 0 1-3.958-.45 6.132 6.132 0 0 1-3.058-1.8c-.84-.899-1.47-2.158-1.92-3.837-.449-1.68-.659-3.778-.659-6.447V51.699h18.53v-4.947h-18.53V32l-5.847 1.08v42.816a39.768 39.768 0 0 0 .72 8.096c.48 2.279 1.29 4.168 2.459 5.697a10.47 10.47 0 0 0 4.677 3.418c1.949.75 4.348 1.14 7.226 1.14Zm31.543-.18.81-4.858a27.07 27.07 0 0 1-3.118-.63 4.588 4.588 0 0 1-2.1-1.139 4.707 4.707 0 0 1-1.229-2.069 12.126 12.126 0 0 1-.39-3.448V23.454l-5.846 1.08v57.569c0 2.219.24 4.078.78 5.547a8.78 8.78 0 0 0 2.248 3.598 9.238 9.238 0 0 0 3.688 2.07c1.679.476 3.413.728 5.157.749Z"
              fill="#000"
              fillRule="nonzero"
            />
            <g transform="translate(3.272 2.88)">
              <path
                d="M96.19 98.498a53.922 53.922 0 0 1-3.958 3.418c-23.445 18.476-57.176 15.723-77.314-6.31-20.139-22.035-19.854-55.877.651-77.57C36.075-3.657 69.848-5.843 92.98 13.025c23.131 18.867 27.82 51.892 10.69 76.339"
                stroke="#008FD6"
                strokeWidth="5.4"
              />
              <circle
                cx="95.561"
                cy="99.097"
                fill="#008FD6"
                fillRule="nonzero"
                r="2.699"
              />
              <path
                d="M8.847 28.785c16.248-1.974 32.318-2.949 48.211-2.923 15.893.025 31.156 1.05 45.789 3.073"
                stroke="#008FD6"
                strokeLinecap="square"
                strokeWidth="5.4"
              />
              <ellipse
                cx="57.421"
                cy="57.12"
                rx="28.035"
                ry="57.12"
                stroke="#008FD6"
                strokeWidth="5.4"
              />
              <path
                d="M11.695 88.603c14.934 2 30.008 3 45.224 3 15.215 0 30.525-1 45.928-3M1.009 59.069h112.482"
                stroke="#008FD6"
                strokeLinecap="square"
                strokeWidth="5.4"
              />
            </g>
          </g>
        </svg>
        <h1
          style={{
            fontSize: 82,
            lineHeight: 1.1,
            letterSpacing: -4,
            marginRight: 12,
            marginTop: 'auto',
            marginBottom: 0,
            fontWeight: 600
          }}
        >
          {title}
        </h1>
        {subtitle && (
          <p
            style={{
              fontSize: 54,
              lineHeight: 1.1,
              letterSpacing: -2,
              marginRight: 12,
              fontWeight: 500,
              color: '#55556D'
            }}
          >
            {subtitle}
          </p>
        )}
      </div>
    ),
    {
      width: 1200,
      height: 630,
      fonts: [
        {
          name: 'inter',
          data: interSemiBold,
          style: 'normal',
          weight: 600
        },
        {
          name: 'inter',
          data: interRegular,
          style: 'normal',
          weight: 500
        }
      ]
    }
  );
}
